<template>
  <div class="poleWarning bg-plus">
    <span>设备告警派单</span>
    <div v-if="warningList[0]">
      <div v-for="item in warningList" :key="item.id" class="singleMsg">
        <i class="el-icon-info" />
        <div class="left-msg">
          <h5>{{ item.poleName }} - {{ item.areaName }} | {{ item.errorType }}</h5>
          <span>{{ item.warningTime }}</span>
        </div>
        <div class="right-button">
          <el-button @click="openDialog(item.id)">派单</el-button>
        </div>
      </div>
      <el-button class="more" @click="$router.push('/pole/waring')">更多 ></el-button>
    </div>
    <div v-else class="text-center">
      <i class="el-icon-warning" />
      <h4>没有更多数据</h4>
    </div>
    <!-- 派单弹窗 -->
    <el-dialog title="告警派单" :visible.sync="dialogFormVisible" width="30%" @close="resetForm">
      <el-form ref="employeeFrom" :model="dispatechUser" :rules="employeeFromRules">
        <el-form-item label="处理人" prop="userId">
          <el-select v-model="dispatechUser.userId" placeholder="请选择负责人">
            <el-option
              v-for="item in employeeUserList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dispatchPole">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getEmployeeListAPI } from '@/apis/employee'
import { dispatchPoleAPI } from '@/apis/warning'
import { getWorkbentchWarningListAPI } from '@/apis/workben'
export default {
  data() {
    return {
      employeeUserList: [],
      warningList: [],
      dispatechUser: {
        id: null,
        userId: null,
        handleStatus: 1
      },
      employeeFromRules: {
        userId: [
          { required: true, message: '请选择负责处理事件的人员', trigger: 'change' }
        ]
      },
      dialogFormVisible: false // 弹窗开关
    }
  },
  created() {
    this.getWorkbentchWarningList()
  },
  updated() {
    console.log(this.warningList)
    if (!this.warningList || !Array.isArray(this.warningList)) {
      console.error('warningList is not an array or is undefined')
    }
  },
  methods: {
    // 派单窗口
    async openDialog(id) {
      this.dialogFormVisible = true
      console.log(id)
      // 获取员工列表
      const employeeList = await getEmployeeListAPI(this.params)
      // console.log(employeeList)
      this.employeeUserList = employeeList.data.rows
      this.dispatechUser.id = id
      // const res = await dispatchPoleAPI()
      // console.log(res)
    },
    // 提交派单任务
    async dispatchPole() {
      await this.$refs.employeeFrom.validate()
      const res = await dispatchPoleAPI(this.dispatechUser)
      // console.log(res)
      if (res.code === 10000) {
        this.$message({
          type: 'success',
          message: res.msg
        })
        this.dialogFormVisible = false
        await this.$refs.employeeFrom.resetFields()
        this.getWorkbentchWarningList()
      }
    },
    // 获取未派单列表
    async getWorkbentchWarningList() {
      try {
        const res = await getWorkbentchWarningListAPI()
        if (res.code === 10000) {
          console.log(res.data.rows)
          this.warningList.push(...res.data.rows)
        } else {
          this.warningList = []
        }
      } catch (err) {
        console.error(err)
      }
      // console.log(res)
    },
    // 关闭窗口时重置表单
    resetForm() {
      this.$refs.employeeFrom.resetFields()
    }
  }
}
</script>

<style scoped lang="scss">
.poleWarning{
  width: 100%;
  height: 350px;
  background: white;
}
 .singleMsg{
   display: flex;
   justify-content: space-between;
   margin-top:20px ;
   border-bottom: 1px solid #ebe9e9;
   padding: 10px 0;
   .el-icon-info{
     justify-self: center;
     color: #fdeed0;
     font-size: 12px;
     vertical-align: middle;
   }
   .left-msg{
     flex: 1;
     padding-left:10px ;
     h5{
       margin: 0;
       padding: 0;
       margin-bottom: 10px;
     }
     span{
       color: #cccccc;
     }
   }
   .right-button{
     .el-button{
       padding: 0;
       border: 0;
       background:#edf5ff ;
       color: #4770ff;
       width: 44px;
       height: 28px;
       font-size:12px ;
       text-align: center;
     }
   }
 }
 .more{
  width: 100%;
  margin: 20px auto 0;
  background: #4770ff;
  // margin-top:20px;
  border-radius: 20px;
  height: 40px;
  color: white;
  text-align: center;
  line-height: 5px;
}
.more:hover{
    background: rgb(112, 148, 255);
  }
  .text-center{
  text-align: center;
  padding-top:20px ;
  h4{
    color: #cccccc;
  }
}
.el-icon-warning{
  font-size: 70px;
  text-align: center;
  color: #f0f0f0;
}
</style>
